Hello World!

This page has a light blue background color!

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

Transparent Boxes

When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:

opacity 0.1

opacity 0.3

opacity 0.6

opacity 1 (default)

Transparent Boxes 2

Result with opacity:

10% opacity

30% opacity

60% opacity

opacity 1

Result with rgba():

10% opacity

30% opacity

60% opacity

default

Notice how the text gets transparent as well as the background color when using the opacity property.